<template>
  <div class="header">
    <el-row type="flex" align="middle" style="height:100%;">
      <!-- 左侧名称及logo -->
      <el-col :span="6">
        <div class="logo">融资服务平台</div>
      </el-col>
      <!-- 各个菜单 -->
      <el-col :span="12">
        <ul>
          <li>
            <router-link to="/home">
              <span>首页</span>
            </router-link>
          </li>
          <li>
            <router-link to="/apply">
              <span>融资申请</span>
            </router-link>
          </li>
          <li>
            <router-link to="/query">
              <span>融资查询</span>
            </router-link>
          </li>
          <li>
            <router-link to="/create">
              <span>合同签订</span>
            </router-link>
          </li>
          <li>
            <router-link to="/report">
              <span>数据报表</span>
            </router-link>
          </li>
        </ul>
      </el-col>
      <!-- 右侧用户信息 -->
      <el-col v-if="btnFlag" :span="6">
        <div class="info">
          <span>管理员，上午好</span>
          <div class="logout" @click="logOut">注销</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'topNav',
  data () {
    return {
      userName: '',
      dayTime: '',
      btnFlag: ''
    }
  },
  mounted () {
    this.btnFlag = this.$store.state.userstore.user.loginFlag || true
  },
  methods: {
    ...mapActions('userstore', ['clearUser']),
    logOut () {
      this.clearUser()
      this.$router.replace({ name: 'login' })
    }
  }
}
</script>
<style lang="scss">
.header {
  color: #ffffff;
  border-bottom: 1px solid #b3b6bd;
  height: 100%;
  .logo {
    font-size: 24px;
    padding-left: 25%;
  }
  .info {
    padding-right: 20%;
    text-align: right;
    font-size: 15px;
    .logout {
      display: inline-block;
      padding: 0 20px;
      cursor: pointer;
    }
    .logout:hover {
      color: #ef5d5d;
    }
  }
  ul {
    list-style: none;
    li {
      font-size: 16px;
      display: inline-block;
      margin: 10px 5%;
      span {
        display: inline-block;
        color: #ffffff;
      }
      .router-link-active {
        span {
          color: #ef5d5d;
        }
      }
      span:hover {
        color: #ef5d5d;
      }
    }
  }
}
</style>
